import React from 'react'
import {BrowserRouter, Route, Switch, Redirect} from 'react-router-dom'
import MeetingRoom from '../meeting'
import AntDTable from '../../component/antd-table'
import { Button } from 'antd'
const Home: React.FC = (props: any) => {
  const thisDataSource = [
    {
      key: '1',
      name: '胡彦斌',
      firsName: '胡',
      age: 32,
      address: '西湖区湖底公园1号',
      children: [{
        key: '4',
        name: '胡彦斌',
        firsName: '江南',
        secondName: '小魏晨',
        age: 32,
        address: '西湖区湖底公园1号',
      }]
    },
    {
      key: '2',
      name: '胡彦祖',
      secondName: '彦祖',
      age: 42,
      address: '西湖区湖底公园1号',
    },
  ];

  const columns = [
    {
      title: '姓名',
      dataIndex: 'name',
      key: 'name',
      render: (item: String) => <a>{ item }</a>,
      children: [
        {
          title: '姓',
          dataIndex: 'firsName',
          key: 'firsName',
          width: 200
        },
        {
          title: '名',
          dataIndex: 'secondName',
          key: 'secondName',
          width: 100
        }
      ]
    },
    {
      title: '年龄',
      dataIndex: 'age',
      key: 'age',
    },
    {
      title: '住址',
      dataIndex: 'address',
      key: 'address',
    },
    {
      title: '操作',
      key: 'use',
      dataIndex: 'key',
      render: (_: any, record: any) => (
        <>
          <Button disabled={ record.children && record.children.length > 0 } onClick={() => { editTable(record) }}>修改</Button>
          <Button onClick={() => { watchTable(_) }}>查看</Button>
        </>
      )
    }
  ]
  function editTable(record: any) {
    console.log(record)
  }
  function watchTable(record: any) {
    console.log(record)
  }
  const rowSelection = {
    onChange: (selectedRowKeys: React.Key[], selectedRows: any[]) => {
      console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
    },
    getCheckboxProps: (record: TableDataInterface) => ({
      disabled: record.key === '4', // Column configuration not to be checked
    }),
  };
    return (
        <>
            <div>
              <AntDTable dataSource={ thisDataSource }
                         columns={ columns }
                         rowSelection={ { type: `checkbox`, onChange: rowSelection.onChange, getCheckboxProps: rowSelection.getCheckboxProps } }
                         rowKey={ 'key' }
              />
            </div>
            <BrowserRouter>
              <Redirect to={ '/meeting' } />
              <Switch>
                <Route path={ '/meeting' }>
                  <MeetingRoom />
                </Route>
              </Switch>
            </BrowserRouter>
        </>
    )
}
interface TableDataInterface {
  key: React.Key,
  name: String,
  firstName?: String,
  secondName?: String,
  age: number,
  address: String,
  children?: TableDataInterface[]
}
export default Home